<template>
    <div class="loading-warpper" :class="{
        fullscreen: fullscreen
    }">
        <div class="loading-inner">
            <div class="icon"></div>
            <div class="text">{{ text }}</div>
        </div>
    </div>
</template>

<script setup>
   const props = defineProps({
        lock: {
            type: Boolean,
            default: true
        },
        fullscreen: {
            type: Boolean,
            default: true
        },
        text: {
            type: String,
            default: '加载中'
        }
   })
</script>

<style lang="scss" scoped>
    .loading-warpper{
        width: 100%;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        &.fullscreen{
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, .5);
        }

        .loading-inner{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .icon{
                width: 40px;
                height: 40px;
            }

            .text{
                font-size: 14px;
                color: #337ecc;
            }
        }
    }
</style>